import React from "react";
import { Outlet, useNavigate, useLocation } from "react-router-dom";
import { Button, Space, Divider } from "antd";
import {
  PlusOutlined,
  BarsOutlined,
  StarOutlined,
  DeleteOutlined,
} from "@ant-design/icons";

import { useRequest } from "ahooks";
import styles from "./ManageLayout.module.scss";
import { MANAGE_LIST_PATHNAME, QUESTION_EDIT_PATHNAME } from "../router";
import { createQuestionService } from "../services/question";
import useNavPage from "../hooks/useNavPage";

const ManageLayout: React.FC = () => {
  useNavPage();
  const nav = useNavigate();
  const { pathname } = useLocation();
  const { loading: createLoading, run: handleCreateClick } = useRequest(
    createQuestionService,
    {
      manual: true,
      onSuccess(result = {}) {
        nav(QUESTION_EDIT_PATHNAME + result.id);
      },
    }
  );

  return (
    <div className={styles.container}>
      <div className={styles.left}>
        <Space direction="vertical">
          <Button
            type="primary"
            size="large"
            icon={<PlusOutlined />}
            onClick={handleCreateClick}
            disabled={createLoading}
          >
            新建问卷
          </Button>
          <Divider style={{ borderTop: "none" }}></Divider>
          <Button
            type={pathname === MANAGE_LIST_PATHNAME ? "default" : "text"}
            size="large"
            icon={<BarsOutlined />}
            onClick={() => nav(MANAGE_LIST_PATHNAME)}
          >
            我的问卷
          </Button>
          <Button
            type={pathname === "/manage/star" ? "default" : "text"}
            size="large"
            icon={<StarOutlined />}
            onClick={() => nav("/manage/star")}
          >
            星标问卷
          </Button>
          <Button
            type={pathname === "/manage/trash" ? "default" : "text"}
            size="large"
            icon={<DeleteOutlined />}
            onClick={() => nav("/manage/trash")}
          >
            回收站
          </Button>
        </Space>
      </div>
      <div className={styles.right}>
        <Outlet />
      </div>
    </div>
  );
};
export default ManageLayout;
